import React from 'react'
import { Row, Col, Typography, Button, Switch, Input } from 'antd'
import { Dropdown, Space, Divider, Select } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import LogicSetting from '../LogicSetting';
const { Title } = Typography;
const Radio = (props) => {
    const { data = {}, list, onChange, selectIndex, } = props
    const {
        require = false,
        option = [],
        value
    } = data
    const items = [
        {
            label: (
                <Button onClick={() => {
                    onChange({
                        changeType: 'all',
                        list: list.map(item => {
                            return {
                                ...item,
                                require: true
                            }
                        })
                    })
                }} type='link'>全部题目设为必填</Button>
            ),
            key: '0',
        },
        {
            label: (
                <Button onClick={() => {
                    onChange({
                        changeType: 'all',
                        list: list.map(item => {
                            return {
                                ...item,
                                require: false
                            }
                        })
                    })
                }} type='link'>全部题目设为非必填</Button>
            ),
            key: '1',
        },
    ];
    return <Row gutter={[24, 24]}>
        <Col span={24}>
            <Title level={4}>全局设置</Title>
        </Col>
        <Col span={24}>
            <Dropdown
                menu={{
                    items,
                }}
            >
                <Button type='link' onClick={(e) => e.preventDefault()}>
                    <Space>
                        全部题目必填设置
                        <DownOutlined />
                    </Space>
                </Button>
            </Dropdown>
        </Col>
        <Col span={24}>
            <Divider></Divider>
        </Col>
        <Col span={24}>
            <Title level={4}>基础设置</Title>
        </Col>
        <Col span={24}>
            此题必填   <Switch onChange={(e) => {
                onChange({
                    data: { require: e },
                    changeType: 'update',
                    index: selectIndex
                })
            }} checked={require}></Switch>
        </Col>
        <Col span={24}>
            <Divider></Divider>
        </Col>
        <Col span={24}>
            <Title level={4}>选项设置</Title>
        </Col>
        <Col span={24}>
            预设答案
        </Col>
        <Col span={24}>
            <Select mode='multiple' onChange={(e) => {
                onChange({
                    data: {
                        value: e
                    },
                    changeType: 'update',
                    index: selectIndex
                })
            }} value={value} style={{ width: 180 }} options={option.map(item => {
                return {
                    ...item,
                    value: item.label
                }
            })}></Select>
        </Col>
        <LogicSetting {...props}></LogicSetting>
    </Row>
}
export default Radio